<template>
  <el-drawer v-model="cardDialog" :size="1400" :before-close="handleClose1" :show-close="false">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg">以图管房</span>
        <div>
          <el-button @click="cardDialog = false">取消</el-button>
        </div>
      </div>
    </template>
    <div class="flex">
      <div class="left">
        <div class="list_room">
          <div v-for="(item, index) in floorData" :class="currentFloor == index ? 'active item' : 'item'"
            @click="changeFloor(item, index)">
            {{ item.floor }}
          </div>
        </div>
      </div>
      <div id="svg" v-if="svgHtml" v-html="svgHtml">

      </div>
      <div class="center" v-else>
        <img src="http://warehouse-api.lanbeiduo.com/api/file/download/no_blayer.png" alt="" class="no-svg">
      </div>
      <div class="right">
        <div class="top">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/dhLd7UezHz_location.png" alt="">
          <span>当前办公楼：</span>
        </div>
        <div class="build-name">州公安局C栋</div>
        <div class="tabs">
          <div :class="currentTab == 0 ? 'tab-item active' : 'tab-item'" style="border-right:1px solid #c9c9c9;"
            @click="changeTab(0)">
            <img v-if="currentTab == 0"
              src="http://warehouse-api.lanbeiduo.com/api/file/download/AjByH5WKmC_liulan2.png" alt="">
            <img v-else src="http://warehouse-api.lanbeiduo.com/api/file/download/CIFDELW0fI_liulan.png" alt="">
            <span>浏览</span>
          </div>
          <div :class="currentTab == 1 ? 'tab-item active' : 'tab-item'" @click="changeTab(1)">
            <img v-if="currentTab == 1"
              src="http://warehouse-api.lanbeiduo.com/api/file/download/Xne9w8M7D7_bangding2.png" alt="">
            <img v-else src="http://warehouse-api.lanbeiduo.com/api/file/download/HZGpIzo5S6_bangding.png" alt="">
            <span>绑定</span>
          </div>
        </div>
        <div :class="currentTab == 2 ? 'box tzfj active2' : 'box tzfj'" @click="changeTab(2)">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/y6ZpLnKNTf_tugf_icon1.png" alt="">
          <span>拖拽房间标注</span>
        </div>
        <div class="box szzt" @click="showFontSize = true">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/r0E2lX6et4_tugf_icon2.png" alt="">
          <span>设置字体大小</span>
        </div>
        <div class="box lcxx">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/GC2Tt7ROZ9_tugf_icon3.png" alt="">
          <span>楼层信息</span>
        </div>
        <div class="box dcpmt" @click="exportSvg">
          <img src="http://warehouse-api.lanbeiduo.com/api/file/download/uALW9N9dSt_tugf_icon4.png" alt="">
          <span>导出平面图</span>
        </div>
        <div class="type-box">
          <div class="font_room">房间类型</div>
          <div class="room-types">
            <div class="room-type">
              <div class="color" style="background: #f7a003;"></div>
              <div>办公室</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #5bfdcb;"></div>
              <div>服务用房</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #59fc03;"></div>
              <div>设备用房</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #295bfa;"></div>
              <div>附属用房</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #f3a0f8;"></div>
              <div>业务用房</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #db6599;"></div>
              <div>闲置用房</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #8de9b6;"></div>
              <div>出租</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #cb7efe;"></div>
              <div>出借</div>
            </div>
            <div class="room-type">
              <div class="color" style="background: #b2b2fe;"></div>
              <div>下属单位</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>

  <el-drawer v-model="roomDialog" :size="1400" :before-close="handleClose2" :show-close="false">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg">以图管房</span>
        <div>
          <el-button @click="roomDialog = false">取消</el-button>
        </div>
      </div>
    </template>
    <div class="">
      <el-table :data="fangjianData" row-key="id">
        <el-table-column align="left" label="房间名称" prop="roomNo">
        </el-table-column>
        <el-table-column align="left" label="所属用房" prop="roomType"></el-table-column>
        <el-table-column align="left" label="房间类型" prop="roomTypeSec"></el-table-column>
        <el-table-column align="left" label="房间面积（㎡）" prop="roomArea">
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="100">
          <template #default="scope">
            <el-button type="primary" link @click="bdRoom(scope.row)">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
  <el-dialog v-model="showRoom" :title="roomInfo?.roomname" width="400">
    <span>
      使用面积:{{ roomInfo?.area }}㎡
    </span>
    <template #footer>
      <div class="dialog-footer" style="display: flex;justify-content: center;margin-top: 30px;">
        <el-button v-if="currentTab == 1" type="primary" @click="unBind">
          重新绑定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showFontSize" title="房间信息标注样式" width="500">
    <el-form :model="fontForm" :rules="rules">
      <el-form-item label="字体大小" prop="fontSize">
        <el-input v-model="fontForm.fontSize" style="width: 300px;" />
        <span style="margin-left: 4px;">em</span>
      </el-form-item>
      <el-form-item label="每行高度" prop="lineHeight">
        <el-input v-model="fontForm.lineHeight" style="width: 300px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showFontSize = false">取消</el-button>
        <el-button type="primary" @click="confirmFont">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getBuildingFloors,
  getFangJianList
} from '@/api/shujuchuli'
import {
  roomSvg,
  roomSvgBand,
  svgBandCancel,
  svgDragPosition,
  svgSetFont,
  roomSvgSave
} from '@/api/chaxuntongji'
import { Base64 } from 'js-base64'
import * as d3 from 'd3';
import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import DOMPurify from 'dompurify';
import { useWindowScroll } from '@vueuse/core';

defineOptions({
  name: 'ytgf'
})
const svgHtml = ref(`

`)
const cardDialog = ref(false)
const floorData = ref([])
const currentFloor = ref(0)
const currentFloorId = ref('')
const roomDialog = ref(false)
const showRoom = ref(false)
const showFontSize = ref(false)
const fontForm = ref({
  floorId: '',
  fontSize: '',
  lineHeight: ''
})

const rules = reactive({
  fontSize: [{ required: true, message: '请输入字体大小', trigger: 'blur' }],
  lineHeight: [{ required: true, message: '请输入行高', trigger: 'blur' }],
})

const openCard = (row,val) => {
  let id = ''
  if(val&&val=='buildingId'){
    id = row.buildingId
  }else{
    id = row.id
  }
  getBuildingFloors(id).then(res => {
    if (res.result.length > 0) {
      floorData.value = res.result
      console.log(floorData.value,'floorData.value')
      currentFloorId.value = res.result[0].id
      getRoomSvg()
    }
  })
}
const roomObject = ref([])
let lineheight = 10.0
let fontsize = 0.5
function getRoomSvg(val) {
  roomSvg(currentFloorId.value).then(res => {
    //console.log(res.result.obj, 'res.result.obj')
    if (res.result.obj) {
      svgHtml.value = res.result.obj
      cardDialog.value = true
      setTimeout(() => {
        let st2s = d3.selectAll(".st2")
        console.log(st2s, 'st2s.empty()')
        st2s.on("mouseover", function (a, b, c) {
          //console.log(a,b,c,'crj1111')
          d3.select(this).style("stroke", "red").style("stroke-width", "3");
        })
        st2s.on("mouseout", function (a, b, c) {
          d3.select(this).style("stroke", "#000000").style("stroke-width", "0.72");
        })
        d3.selectAll(".st2").on('click', roomClick)
        if (res.result.attributes) {
          fontsize = parseFloat(res.result.attributes.fontSize);
          lineheight = parseFloat(res.result.attributes.lineHeight);
        }
        if (res.result.object) {
          if (val == 'font') {
            deleteAllRoomLabel()
            //deleteInfo(roomObject.value[i].indexid, roomObject.value[i].layerRoomInfoEntity.lrid)
          }
          roomObject.value = res.result.object.filter(item => item.indexid)
          if (roomObject.value.length > 0) {
            getFangJianList(currentFloorId.value).then(res => {
              if (res.code == 200) {
                let arr = res.result
                for (let i = 0; i < roomObject.value.length; i++) {
                  console.log(arr, roomObject.value[i], 'vbvb')
                  let obj = arr.find(item => item.id == roomObject.value[i].layerRoomInfoEntity.lrid)
                  console.log(obj, 'crjobj')
                  roomObject.value[i].layerRoomInfoEntity.members = obj.members
                  roomObject.value[i].layerRoomInfoEntity.roomType = obj.roomType

                  if (roomObject.value[i].indexid) {
                    writeInfo(roomObject.value[i].indexid, roomObject.value[i].layerRoomInfoEntity)
                  } else {
                    deleteInfo(roomObject.value[i].indexid, roomObject.value[i].layerRoomInfoEntity.lrid)
                  }
                }
              }
            })
          }
        }
      }, 1000);
    } else {
      svgHtml.value = ''
      cardDialog.value = true
    }
  })
}

//设置字体和行高
function confirmFont() {
  console.log(currentFloorId.value, 'currentFloorId.value');
  fontForm.value.floorId = currentFloorId.value
  svgSetFont(fontForm.value).then(res => {
    ElMessage({
      type: 'success',
      message: '设置成功!'
    })
    showFontSize.value = false
    getRoomSvg('font')
  })
}

function changeFloor(val, index) {
  console.log(val, 'val')
  currentFloor.value = index
  currentFloorId.value = val.id
  getRoomSvg()
}

defineExpose({ openCard })

let zoom = null
let translate = [0, 0]
let currentScale = 1
let hasInitZoom = false

// let roomObject = [
//   {
//     indexid: "shape30-62",
//     layerRoomInfoEntity: {
//       roomArea: 16.27,
//       coordinatex: null,
//       coordinatey: null,
//       indexid: "shape30-62",
//       id: "40288e177ae07e08017b94c94c955508",
//       roomNo: "谈话室3",
//       roomtype: null,
//       usertype: null,
//     }
//   }
// ]

onMounted(() => {
  let width = 1200;
  let height = window.innerHeight * 1.5;
  console.log(d3, 'd3.random')
  // let randomX = d3.random.normal(width / 2, 80);
  // let randomY = d3.random.normal(height / 2, 80);
  // let data = d3.range(2000).map(function () {
  //     return [randomX(), randomY()];
  // })
  //zoom = d3.behavior.zoom().scaleExtent([0.5, 5]).on("zoom", zoomed);
  //var svg = d3.select("svg").call(zoom);
  var body = d3.select("body");
  var svg123 = body.select("svg");
  // console.log(svg123.style("width"));
  // console.log(svg123.style("height"));

})
function originStartPoint222() {
  var x777 = d3.select(this).attr("x");
  var y777 = d3.select(this).attr("y");
  var x777f = parseFloat(x777);
  var y777f = parseFloat(y777);
  return { x: x777f, y: y777f };
}
function onDrag222(d) {
  if (currentTab.value != 2) {
    return;
  }
  console.log(d, d3.event, 'draggggg')
  let x = d.x
  let y = d.y
  //$("#xloc").html(x.toString());
  //$("#yloc").html(y.toString());

  d3.select(this).attr("x", d.x).attr("y", d.y);

  var id33233 = d3.select(this).attr("id");

  var y123f1 = d.y + lineheight;
  var tttdfdfdttt1 = d3.select("#" + id33233 + "1");
  tttdfdfdttt1.attr("x", d.x).attr("y", y123f1);

  var y123f2 = d.y + (lineheight * 2);
  var tttdfdfdttt2 = d3.select("#" + id33233 + "2");
  tttdfdfdttt2.attr("x", d.x).attr("y", y123f2);

  var y123f3 = d.y + (lineheight * 3);
  var tttdfdfdttt3 = d3.select("#" + id33233 + "3");
  tttdfdfdttt3.attr("x", d.x).attr("y", y123f3);


  //显示人的姓名的代码拖动，保留
  // 		var len = d3.select(this).attr("len");
  // 		var lenint = parseInt(len);		
  // 		for(var i=2; i<lenint; i++) {
  // 			var tttdfdfdttt256 = d3.select("#" + id33233 + i);			
  // 			var y123f5656 = d.y + (disc * i);
  // 			tttdfdfdttt256.attr("x", d.x).attr("y", y123f5656);
  // 		}

}
function onDragEnd222(a, b, c) {
  let obj = roomObject.value.find(item => item.indexid == a.sourceEvent.srcElement.parentNode.parentNode.id)?.layerRoomInfoEntity
  // if (isDrag == false) {
  //   return;
  // }
  let x777 = d3.select(this).attr("x");
  let y777 = d3.select(this).attr("y");
  //var lrid = d3.select(this).attr("id");
  let params = {
    roomId: obj.lrid,
    coordinateX: x777,
    coordinateY: y777
  }
  svgDragPosition(params).then(res => {

  })
  console.log("onDragEnd222");
}
const currentTab = ref(0)
function changeTab(val) {
  currentTab.value = val
}
const fangjianData = ref([])
let form = ref({
  indexid: '',
  layerRoomInfoEntity: {}
})
const roomInfo = ref({})
function roomClick(a, b, c) {
  console.log(a.srcElement.parentNode.id, b, c)
  console.log(roomObject.value, 'roomObject.value')
  roomInfo.value = roomObject.value.find(item => item.indexid == a.srcElement.parentNode.id)?.layerRoomInfoEntity
  if (currentTab.value == 0) {
    if (roomInfo.value) {
      showRoom.value = true
    }
    return
  }
  if (currentTab.value == 1) {
    console.log(a.srcElement.parentNode.id, b, c)
    form.value.indexid = a.srcElement.parentNode.id
    console.log(roomInfo.value, 'roomObject.value')
    if (roomInfo.value) {
      showRoom.value = true
    } else {
      getFangJianList(currentFloorId.value, { band: 2 }).then(res => {
        if (res.code == 200) {
          fangjianData.value = res.result
          roomDialog.value = true
        }
      })
    }
  }
}

function bdRoom(row) {
  //var p9999 = document.getElementById(indexid).parentNode;
  form.value.layerRoomInfoEntity = row
  let params = {
    indexId: form.value.indexid,
    roomId: row.id
  }
  roomSvgBand(params).then(res => {
    ElMessage({
      type: 'success',
      message: '绑定成功!'
    })
    getRoomSvg()
    //writeInfo(form.value.indexid, form.value.layerRoomInfoEntity)
  })
  roomDialog.value = false
}
//解绑
function unBind() {
  console.log(roomInfo.value, 'crjkk')
  const params = {
    indexId: roomInfo.value.indexid,
    roomId: roomInfo.value.lrid
  }
  svgBandCancel(params).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '解绑成功!'
      })
      deleteAllRoomLabel()
      deleteInfo(roomInfo.value.indexid, roomInfo.value.lrid)
      showRoom.value = false
      roomObject.value = []
      getRoomSvg()
    }
  })
}
const colorObj = {
  '办公室':'rgb(247, 160, 3)',
  '服务用房':'rgb(91, 253, 203)',
  '设备用房':'rgb(89, 252, 3)',
  '附属用房':'rgb(41, 91, 250)',
  '业务用房':'rgb(243, 160, 248)',
  '闲置用房':'rgb(219, 101, 153)',
  '出租':'rgb(141, 233, 182)',
  '出借':'rgb(203, 126, 254)',
  '下属单位':'rgb(178, 178, 254)'
}
function writeInfo(indexid, layerRoomInfoEntity) {
  console.log(indexid, layerRoomInfoEntity, 'bbbb')//group30-61
  var groom = d3.select("#" + indexid);
  var rect123 = d3.select("#" + indexid).select("rect");
  let y123f = 0
  let x123 = 10
  if (rect123._groups[0][0]) {
    y123f = parseFloat(rect123.attr("y")) + 15
    rect123.style("fill",colorObj[layerRoomInfoEntity.roomType])
  } else {
    var path123 = d3.select("#" + indexid).select("path")
    console.log(path123, 'path123')
    path123.style("fill", colorObj[layerRoomInfoEntity.roomType]);
    var d123 = path123.attr("d")
    var pointstr = d123.split(' ')
    pointstr[0] = pointstr[0].replace("M", "").replace("m", "")
    x123 = pointstr[0]
    y123f = parseFloat(pointstr[1]) + 15
  }

  //查询坐标信息是否保存
  if (layerRoomInfoEntity.coordinatex && layerRoomInfoEntity.coordinatey) {
    var cordx = parseFloat(layerRoomInfoEntity.coordinatex);
    var cordy = parseFloat(layerRoomInfoEntity.coordinatey);
    if (!isNaN(cordx) && !isNaN(cordy)) {
      x123 = cordx;
      y123f = cordy;
    }
  }

  var ggg = groom.append("g");
  ggg.attr("id", layerRoomInfoEntity.lrid);
  console.log(ggg, 'ggg')
  var textele = ggg.append("text");
  textele.attr("id", "text" + layerRoomInfoEntity.lrid);
  textele.attr("x", x123).attr("y", y123f).attr("class", "roomlabel");
  textele.style("fill", "#000000").style("font-family", "宋体").style("font-size", fontsize + "em").style("font-weight", "bold").style("text-decoration", "none");
  textele.text(layerRoomInfoEntity.roomname || layerRoomInfoEntity.roomNo);

  y123f = y123f + lineheight;
  var textlabel1 = ggg.append("text");
  textlabel1.attr("id", "text" + layerRoomInfoEntity.lrid + "1");
  textlabel1.attr("x", x123).attr("y", y123f).attr("class", "roomlabel");
  textlabel1.style("fill", "#000000").style("font-family", "宋体").style("font-size", fontsize + "em").style("font-weight", "normal").style("text-decoration", "none");
  textlabel1.text((layerRoomInfoEntity.area || layerRoomInfoEntity.roomArea) + "  ㎡");

  y123f = y123f + lineheight;
  var textlabel2 = ggg.append("text");
  textlabel2.attr("id", "text" + layerRoomInfoEntity.lrid + "2");
  textlabel2.attr("x", x123).attr("y", y123f).attr("class", "roomlabel");
  textlabel2.style("fill", "#000000").style("font-family", "宋体").style("font-size", fontsize + "em").style("font-weight", "bold").style("text-decoration", "none");
  textlabel2.text(layerRoomInfoEntity.roomType);

  y123f = y123f + lineheight;
  var textlabel3 = ggg.append("text");
  textlabel3.attr("id", "text" + layerRoomInfoEntity.lrid + "3");
  textlabel3.attr("x", x123).attr("y", y123f).attr("class", "roomlabel");
  textlabel3.style("fill", "#000000").style("font-family", "宋体").style("font-size", fontsize + "em").style("font-weight", "normal").style("text-decoration", "none");
  textlabel3.text(layerRoomInfoEntity.members + "  人");

  var dragBehavior222 = d3.drag().on("end", onDragEnd222).on("drag", onDrag222);
  var tttttt = d3.select("#text" + layerRoomInfoEntity.lrid);
  tttttt.call(dragBehavior222);
  tttttt.on('mouseover', roomLabelMouseOver);
  tttttt.on('mouseout', roomLabelMouseOut);
}

function fillPathColor(rect123, layerRoomInfoEntity) {
    // var xsUsertype = getXsUsertype(layerRoomInfoEntity);
    // **房间详细类型	中文类型名	*/
    var roomtype = layerRoomInfoEntity.roomtype;
    // **房间类型	1、服务用房；2、设备用房;3、附属用房；4、业务用房；5、办公用房；6、闲置用房；7、出租；8、出借；9、下属单位
    // var usertype = xsUsertype==null?layerRoomInfoEntity.usertype:xsUsertype;
    var usertype = layerRoomInfoEntity.usertype;
	if(usertype == 1) {
		rect123.style("fill", "#5bfdcb");
		//roomtype = "服务用房";
	} else if(usertype == 2) {
		rect123.style("fill", "#59fc03");
		//roomtype = "设备用房";
	} else if(usertype == 3) {
		rect123.style("fill", "#295bfa");
		//roomtype = "附属用房";
	} else if(usertype == 4) {
		rect123.style("fill", "#f3a0f8");
		roomtype = "业务用房";
	} else if(usertype == 5) {
		rect123.style("fill", "#f7a003");
		roomtype = "办公室";
	} else if(usertype == 6) {
        rect123.style("fill", "#db6599");
        roomtype = "闲置用房";
    } else if(usertype == 7) {
        rect123.style("fill", "#8de9b6");
        roomtype = "出租";
    } else if(usertype == 8) {
        rect123.style("fill", "#cb7efe");
        roomtype = "出借";
    } else if(usertype == 9) {
        rect123.style("fill", "#b2b2fe");
        roomtype = "下属单位"
    } else {
		roomtype = " ";
	}
	
	return roomtype;
}

function roomLabelMouseOver() {
  d3.select(this).style("fill", "red").style("font-weight", "bold").style("text-decoration", "underline");
}
function roomLabelMouseOut() {
  d3.select(this).style("fill", "#000000").style("font-weight", "bold").style("text-decoration", "none");
}
function zoomed() {
  g.attr("transform", "translate(" + zoom.translate() + ")" + "scale(" + zoom.scale() + ")");
  translate = zoom.translate();
  currentScale = zoom.scale();
}
function handleClose1() {
  cardDialog.value = false
}
function handleClose2() {
  roomDialog.value = false
}
function deleteAllRoomLabel() {
  var seeels = d3.selectAll(".roomlabel");
  seeels.remove()
  // if(seeels.empty() == false) {

  // 	seeels.each(fff123);

  // 	function fff123(d,i) {
  // 		this.remove();
  // 	}
  // }
}

function deleteInfo(indexid, lrid) {
  console.log(indexid, lrid, 'indexid, lrid')
  //房间恢复原来图样
  let rect123 = d3.select("#" + indexid).select("rect");
  rect123.style("fill", "url(#ptrn2-4294967295)");

  //移除房间标注信息
  // console.log("lrid=" + lrid);
  // var roominfo = d3.select("#text" + lrid);
  // console.log("roominfo=", roominfo);

  // var len = roominfo.attr("len");
  // var lenint = parseInt(len);

  // roominfo.remove();

  // var id33233 = lrid;

  // var tttdfdfdttt1 = d3.select("#text" + id33233 + "1");
  // tttdfdfdttt1.remove();

  // var tttdfdfdttt2 = d3.select("#text" + id33233 + "2");
  // tttdfdfdttt2.remove();

  // var tttdfdfdttt3 = d3.select("#text" + id33233 + "3");
  // tttdfdfdttt3.remove();
}

function exportSvg() {
  let svg = document.getElementById("svg");
  console.log(Base64.encode(svg.innerHTML), 'svg.innerHTML')
  let params = {
    floorId: currentFloorId.value,
    svg: Base64.encode(svg.innerHTML)
  }
  roomSvgSave(params).then(res => {
    console.log(res, '3333')
    if (res.code == 200) {
      window.open(res.result.file)
    }
  })
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  height: 100%;

  .left {
    flex: none;
    .list_room {
      border: 1px solid #698be0;
      width: 45px;
    }

    .item {
      font-weight: bold;
      color: #dedede;
      display: block;
      background: #f8fcff;
      border-bottom: 1px solid #dedede;
      height: 35px;
      line-height: 35px;
      text-align: center;
      cursor: pointer;
    }

    .active {
      background: #698be0;
      color: #fff;
    }
  }

  .center {
    flex: 1;
     display: flex;
     justify-content: center;
    .no-svg {
      width: 500px;
      height: 400px;
    }
  }

  .right {
    width: 160px;
    height: 100%;
    background: #e9eaff;
    border-radius: 0 10px 10px 0;
    padding: 10px;
    flex: none;
    .top {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 12px;

      img {
        width: 18px;
        height: 25px;
        margin-right: 4px;
      }
    }

    .build-name {
      font-size: 12px;
      margin: 10px 0 12px 0;
    }

    .tabs {
      display: flex;
      border: 1px solid #c9c9c9;

      .tab-item {
        font-size: 12px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px 0;
        background-color: #fff;
        cursor: pointer;

        img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }

      .active {
        background-color: #698be0;
        color: #fff;
      }
    }

    .box {
      display: flex;
      align-items: center;
      padding-left: 10px;
      background: #fff;
      border: 1px solid #a94442;
      margin: 10px 0;
      padding: 6px 0 6px 16px;
      font-size: 12px;
      cursor: pointer;
      box-sizing: border-box;

      img {
        width: 18px;
        height: 18px;
        margin-right: 4px;
      }
    }

    .tzfj {
      color: #a94442;
      border: 1px solid #a94442;
    }

    .active2 {
      background-color: #698be0;
      color: #fff;
    }

    .szzt {
      color: #01a2e8;
      border: 1px solid #01a2e8;
    }

    .lcxx {
      color: #38c255;
      border: 1px solid #38c255;
    }

    .dcpmt {
      color: #8b4cf5;
      border: 1px solid #8b4cf5;
    }

    .type-box {
      border: 1px solid #698be0;
      border-radius: 4px;
      background-color: #fff;

      .font_room {
        height: 28px;
        line-height: 28px;
        background: #71a0e1;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }

      .room-types {
        padding: 16px 0 0 10px;

        .room-type {

          display: flex;
          align-items: center;
          margin-bottom: 6px;

          div {
            font-size: 12px;
          }

          .color {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }
      }

    }
  }
}

.st1 {
  fill: none;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.75;
}

.st2 {
  fill: url(#ptrn2-4294967295);
  shape-rendering: crispEdges;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.st3 {
  fill: none;
  fill-rule: evenodd;
  font-size: 12px;
  overflow: visible;
  stroke-linecap: square;
  stroke-miterlimit: 3;
}
</style>